<template>
  <view class="device-list">
    <view class="device-item">
      <!-- 标题区域 -->
      <view class="device-title">
        <text class="device-name">{{ data.pointName }}</text>
        <text class="device-type">{{ data.counterType == '1' ? '有屏幕快递柜' : '无屏幕快递柜' }}</text>
      </view>

      <view class="device-status">
        <text class="status-tag status-tag_1" v-if="data.counterStatus == '0'">在线</text>
        <text class="status-tag status-tag_2" v-else-if="data.counterStatus == '1'">离线</text>
        <text class="status-tag status-tag_3" v-if="data.onlineStatus == '0'">营业</text>
      </view>

      <!-- 基础信息区域 -->
      <view class="device-info">
        <view>设备编号：{{ data.counterNo }}</view>
        <view>柜子数量：{{ data.cabinetSum }}</view>
        <view>设备位置：{{ data.counterAlias }}</view>
      </view>

      <!-- 底部操作按钮（参考图新增） -->
      <view class="action-bar">
        <!-- <button class="action-btn">
          <uni-icons type="download" size="18" class="nav-icon"></uni-icons>
          <text>更新APP</text>
        </button> -->
        <button class="action-btn">
          <uni-icons type="loop" size="18" class="nav-icon"></uni-icons>
          <text>刷新</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { PropType, defineProps, computed } from 'vue'

  const props = defineProps({
    data: {
      type: Object as PropType<any>,
      required: true,
    },
  })
</script>

<style lang="scss" scoped>
  /* 设备列表容器 */
  .device-list {
    padding: 0 24rpx;
  }

  /* 设备项卡片 */
  .device-item {
    padding: 24rpx;
    margin-bottom: 24rpx;
    border: 1px solid #e6e6e6;
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;

    &:active {
      background: #f9f9f9;
      transform: translateY(2rpx);
    }
  }

  /* 标题区域 */
  .device-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;

    .device-name {
      font-size: 34rpx;
      font-weight: 600;
      color: #222;
      max-width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .device-type {
      font-size: 26rpx;
      color: #999;
      background: #f5f5f5;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
    }
  }

  /* 状态标签区域 */
  .device-status {
    display: flex;
    gap: 12rpx;
    margin-bottom: 20rpx;

    .status-tag {
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      color: #fff;
      font-size: 24rpx;
      font-weight: 500;
      white-space: nowrap;
      background-size: 200% 100%; /* 渐变动画备用 */
    }
  }

  /* 基础信息区域 */
  .device-info {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20rpx; /* 与操作按钮区隔 */

    > view {
      margin-bottom: 8rpx;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  /* 底部操作按钮 */
  .action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
    padding-top: 16rpx;
    border-top: 2px dashed #f0f0f0; /* 分隔线 */

    .action-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      gap: 6rpx;
      padding: 8rpx 20rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
      font-weight: 500;
      transition: all 0.25s ease;
      height: 52rpx;
      justify-content: center;
      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
    }
  }

  .status-tag_1 {
    background: linear-gradient(130deg, #52c41a 0%, #389e0d 100%);
  }
  .status-tag_2 {
    background: linear-gradient(130deg, #8c8c8c 0%, #595959 100%);
  }
  .status-tag_3 {
    background: linear-gradient(130deg, #4096ff 0%, #1677ff 100%);
  }
</style>
